<template>
  <div class="up-img-box">
    <div class="plugin-images">
      <ul
        v-if="modelValue"
        class="el-upload-list el-upload-list--picture-card"
        @click="elxImgboxHandle"
      >
        <li
          tabindex="0"
          class="el-upload-list__item is-success"
        >
          <img
            :src="checkFileUrl(modelValue)"
            class="el-upload-list__item-thumbnail"
            alt
          >
        </li>
      </ul>

      <div
        v-else
        tabindex="0"
        class="el-upload el-upload--picture-card"
        @click="elxImgboxHandle"
      >
        <el-icon><Plus /></el-icon>
      </div>
    </div>
    <!-- 弹窗, 新增图片 -->
    <elx-imgbox
      v-if="elxImgboxVisible"
      ref="elxImgboxRef"
      :max-size="maxSize"
      :img-size-limit="imgSizeLimit"
      @refresh-pic="refreshPic"
    />

    <el-dialog
      v-model="visible"
      :append-to-body="visible"
    >
      <ImgShow :src="modelValue" />
    </el-dialog>
  </div>
</template>

<script setup>

const emit = defineEmits(['input', 'update:modelValue'])

const props = defineProps({
  modelValue: {
    default: '',
    type: String
  },
  disabled: {
    default: false,
    type: Boolean
  },
  maxSize: {
    default: 2,
    type: Number
  },
  imgSizeLimit: {
    default: false,
    type: Boolean
  }
})

const elxImgboxVisible = ref(false)

const elxImgboxRef = ref(null)
// 打开图片选择窗
const elxImgboxHandle = () => {
  if (props.disabled) {
    if (props.modelValue) openImg()
    return false
  }
  elxImgboxVisible.value = true
  nextTick(() => {
    elxImgboxRef.value?.init(1)
  })
}

const visible = ref(false)
const openImg = () => {
  visible.value = true
}

const refreshPic = (imagePath) => {
  emit('update:modelValue', imagePath)
  emit('input', imagePath)
}

</script>

<style lang="scss" scoped>
@use "index";
</style>
